<template>
  <div >

    <!-- <novelX  v-for="  item  in    historyarr"   :key="item.id"  :novelitem = "item" >  <p  style="font-size: 0.5rem;">  {{item.speedOfProgress}} </p> </novelX> -->
    <CardBook  v-for="  item  in    historyarr"   :key="item.id"  :novelitem = "item" >  <p  style="font-size: 0.5rem;">  {{item.speedOfProgress}} </p> </CardBook>
    <!-- <CardBook  v-for="  item  in    12"   :key="item.id"   >  
   
    </CardBook> -->
  
  </div>
     
  </template>
  
  <script>
  import {weekNum }  from '@/api/home'
  // import novelX from '@/components/com/novelX.vue'
  import CardBook from '@/components/Dreame/CardBook.vue'
  export default {
    name:"history",
    data() {
        return {
            historyarr: [],
            isload : true,
        };
    },
    async created() {
        if(this.isload){
        this.gethistory()
        this.isload = false
        }
    },
    computed: {},
    methods: {
    // 退出阅读
    async  gethistory(){
      console.log("历史记录",this.$store.getters.gethistory);
        let result = await Promise.all(Object.keys(this.$store.getters.gethistory).map(v => {
            return weekNum({ page: 1, size: 1, where: { id: v } });
        }));
        this.historyarr = result.map((v) => {
            console.log("test",this.$store.getters.gethistory[v.data.list[0].id]);
            var num = parseInt((this.$store.getters.gethistory[v.data.list[0].id] / v.data.list[0].partSum) * 10000) / 100;
     
            v.data.list[0].speedOfProgress = Number.isNaN(num) ? 0 + "%" : num + "%";

            console.log("注入历史记录",this.$store.getters.gethistory[ v.data.list[0].id]);
            //                          历史记录{  13 :  66  }
            v.data.list[0].sort = this.$store.getters.gethistory[ v.data.list[0].id]
            return v.data.list[0];
        });
        console.log("重新匹配历史记录", this.historyarr );  


      }
    },
    components:{
      // novelX
    },
    // activated 组件被激活的生命周期  ,  第一次是为了 让页面组件能够进行缓存 而 局部组件能继续触发
      async activated(){
        console.log(3);
        if(this.isload){
          this.gethistory()
        }
        this.isload = true
}





};
  </script>
  
  <style lang="scss" scoped>
  .my_container {
    border-top: 1px solid rgb(245, 245, 245);
    font-size: 0.5rem;
    padding-left:10px;
    box-sizing: border-box;
    .bookList {
    margin-top: 10px;
    padding-right:10px;
    .img {
      margin-right: 8px;
      width: 60px;
      height: 80px;
    }
  }
  }
  </style>
  